<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <base href="http://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/" />
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">

     $(function () {

         $("#btn4").click(function () {

             //准备要发送的数据
             var student = {
                 "stuId": 5,
                 "stuName": "tom",
                 "address": {
                     "province": "江西",
                     "city": "上饶",
                     "street": "东街",
                 },
                 "subject": [
                     {
                         "subjectName": "JavaSE",
                         "subjectScore": 100
                     }, {
                         "subjectName": "SSM",
                         "subjectScore": 99
                     }
                 ],
                 "map": {
                     "k1": "v1",
                     "k2": "v2"
                 }
             };

             //将JSON对象转换为JSON字符串
             var requestBody = JSON.stringify(student);


             $.ajax({
                 url: "send/compose/object.json",
                 type: "post",
                 data: requestBody,
                 headers: {
                     Accept: 'application/json',
                     ContentType: 'application/json'
                 },
                 dataType: "json",
                 success: function (response) {
                     console.log(response);
                 },
                 error: function (response) {
                     console.log(response);
                 }
             });
         });

         $("#btn3").click(function () {

             //准备要发送到服务器端的数组
             var array = [5, 8, 12];
             console.log(array.length);

             //将JSON数组转换为JSON字符串
             var requestBody = JSON.stringify(array);
             console.log(requestBody.length);

             $.ajax({
                 url: "send/array/three.html",
                 type: "post",
                 data: requestBody,
                 headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json'
                 },
                 dataType: 'text',
                 success : function (response) {
                     alert(response);
                 },
                 error : function (response) {
                     alert(response);
                 }
             });
         });

         $("#btn2").click(function (){

             $.ajax({
                 "url": "send/array/two.html",			// 请求目标资源的地址
                 "type": "post",						// 请求方式
                 "data": {							// 要发送的请求参数
                     "array[0]": 5,
                     "array[1]": 8,
                     "array[2]": 12
                 },
                 "dataType": "text",					// 如何对待服务器端返回的数据
                 "success": function(response) {		// 服务器端成功处理请求后调用的回调函数，response是响应体数据
                     alert(response);
                 },
                 "error": function(response) {		// 服务器端处理请求失败后调用的回调函数，response是响应体数据
                     alert(response);
                 }
             })
         });

         $("#btn5").click(function (){
             alert("这是LAYER的弹窗");
         });


     });

    </script>
</head>
<body>
   <a href="test/ssm.html">测试SSM整合环境</a>

   <br/>
   <br/>

   <button id="btn2">Send [5,8,12] Two</button>

   <br/>
   <br/>

   <button id="btn3">Send [5,8,12] Three</button>

   <br/>
   <br/>

   <button id="btn4">Send a compose object</button>
   <br/>
   <br/>

   <button id="btn5">点我弹框layer</button>
</body>
</html>